<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
		<script src="js/xlsx.core.min.js"></script>
		<script src="js/xlsx.full.min.js"></script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	</head>
	<body>
		<!--<input id='excel-file' type="file"/>-->
		<div id="app">
		    <el-upload
	      		ref="upload"
	      		class="upload-demo"
	      		action
	      		accept=".xlsx"
	      		:limit=limit
	      		:auto-upload="false"
	      		:before-upload="beforeUpload"
	      		:on-change="handleChange"
	      		:on-remove="handleRemove"
	      		:on-exceed="handleExceed"
	      		:on-success="handleSuccess"
	      		:on-error="handleError"
	      		:file-list="fileList"
	    		>
  				<el-button size="small" type="primary">点击上传</el-button>
  				<div slot="tip" class="el-upload__tip">上传文件</div>
	    	</el-upload>
			<div id="btngroup" style="margin-top: 20px;">
				<el-row style="margin-top: 20px;">
					<el-button id="btn" v-on:click="btn_bdtogc()" type="success">BD_TO_GC</el-button>
					<el-button id="btn" v-on:click="btn_gctobd()" type="success">GC_TO_BD</el-button>
					<el-button id="btn" v-on:click="btn_gctowgs84()" type="success">GC_TO_WGS84</el-button>
					<el-button id="btn" v-on:click="btn_wgs84togc()" type="success">WGS84_TO_GC</el-button>
					<el-button id="btn" v-on:click="btn_bdtowgs84()" type="success">BD_TO_WGS84</el-button>
				</el-row>
				<el-row style="margin-top: 20px;">
					<el-button v-on:click="btn_exportexcle()" type="success">导出excle</el-button>   
					<el-button v-on:click="btn_exportcsv()" type="success">导出scv</el-button>
				  	<el-button v-on:click="btn_exportjson()" type="success">导出json</el-button>
				</el-row>
			</div>
			<div id="demo"><h1>{{message}}</h1></div>
		 	<template>
			    <el-table id="table" border :data="tableData" style="width: 100%">
					<el-table-column
					    prop="index"
					    label="id"
						width="50">
					</el-table-column>
			      	<el-table-column
				        prop="lng"
				        label="bdlng">
			      	</el-table-column>
			      	<el-table-column
				        prop="lat"
				        label="bdlat">
			      	</el-table-column>
			      	<el-table-column
				        prop="gclng"
				        label="gclng">
			      	</el-table-column>
			      	<el-table-column
				        prop="gclat"
				        label="gclat">
			      	</el-table-column>
			      	<el-table-column
				        prop="wgs84lng"
				        label="wgs84lng">
			      	</el-table-column>
			      	<el-table-column
				        prop="wgs84lat"
				        label="wgs84lat">
			      	</el-table-column>
			    </el-table>
		  	</template>
		</div>

	</body>
	<script src="js/export.js"></script>
	<!--<script src="js/xlsx.js" type="text/javascript" charset="utf-8"></script>-->

	<script charset="gb2312">
		new Vue({
			el: '#app',
			data: {
				message: '显示转换信息',
				tableData: [],
				limit: 1,  // 上传excell时，同时允许上传的最大数
				fileList: [],   // excel文件列表
				limitNum:1
			},
			methods:{
		      	// 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传
		      	beforeUpload(file) {
		      	let extension = file.name.substring(file.name.lastIndexOf('.')+1)
		        	let size = file.size / 1024 / 1024
		        	if(extension !== 'xlsx') {
		          		this.$message.warning('只能上传后缀是.xlsx的文件')
		        	}
		        	if(size > 10) {
	         			this.$message.warning('文件大小不得超过10M')
		        	}
		      	},
		
				// 文件状态改变
				handleChange(file, fileList) {
					if (file) {
						this.fileList = fileList.slice(-3)
						this.importExcel(file)
					}
				},
		
		      	// 删除文件
		      	handleRemove(file, fileList) {
		        	this.fileList = []
		      	},
		
		      	// 文件超出个数限制
		     	handleExceed(files, fileList) {
		        	this.$message.warning(`只能选择 ${this.limitNum} 个文件，当前共选择了 ${files.length + fileList.length} 个`)
		      	},
		
		      	// 文件上传成功
		      	handleSuccess(res, file, fileList) {
		        	this.$message.success('文件上传成功')
		      	},
		
		      	// 文件上传失败
		      	handleError(err, file, fileList) {
		        	this.$message.error('文件上传失败')
		      	},
		    
			  	// 导入表格
			    importExcel(param) {
			      let _this = this;
			      _this.file2Xce(param).then(item => {
			        if (item && item.length > 0) {
			          // xlsxJson就是解析出来的json数据,数据格式如下
			          // [{sheetName: sheet1, sheet: sheetData }]
			          if (item[0] && item[0].sheet && item[0].sheet.length) {
			          	for (var row in item[0].sheet){
							item[0].sheet[row].index=row
			          		item[0].sheet[row].gclng=''
			          		item[0].sheet[row].gclat=''
			          		item[0].sheet[row].wgs84lng=''
			          		item[0].sheet[row].wgs84lat=''
			          	}
			            _this.tableData = item[0].sheet  //把数据塞到表格预览
			            // console.log(_this.tableData)
			          }
			        }
			      })
			      .catch(error => {
			        loading.close();
			      });
			    },
			    /**
			     * 解析文件
			     * @param {Object} file
			     */
			    file2Xce(file) {
			      return new Promise(function(resolve, reject) {
			        const reader = new FileReader();
			        reader.onload = function(e) {
			          const data = e.target.result;
			          this.wb = XLSX.read(data, {
			            type: "binary"
			          });
			          const result = [];
			          this.wb.SheetNames.forEach(sheetName => {
			            result.push({
			              sheetName: sheetName,
			              sheet: XLSX.utils.sheet_to_json(this.wb.Sheets[sheetName])
			            });
			          });
			          /* console.log("解析")
			          console.log(result) */
			          resolve(result);
			        };
			        reader.readAsBinaryString(file.raw);
			      });
			    },
			    //********************************************
				btn_bdtogc(){
					console.log('btn_bdtogc()')
					if(this.tableData.length==0){
				        this.$alert('请先上传文件', '提示', {
          					confirmButtonText: '确定',
        				})
					}
					else{
//						console.log(this.tableData)
						for (var row in this.tableData) {
//							console.log(this.tableData[row].lng)
							//百度经纬度坐标转国测局坐标
							var bd09togcj02 = coordtransform.bd09togcj02(this.tableData[row].lng,this.tableData[row].lat);
//							console.log(bd09togcj02)
							this.tableData[row].gclng=bd09togcj02[0]
							this.tableData[row].gclat=bd09togcj02[1]
//							console.log(this.tableData[row])
						}
					}
				},
				//********************************************
//					<el-button id="btn" v-on:click="btn_wgs84togc()" type="success">WGS84_TO_GC</el-button>
//					<el-button id="btn" v-on:click="btn_bdtowgs84()" type="success">BD_TO_WGS84</el-button>
				btn_wgs84togc(){
					console.log('btn_wgs84togc()')
					if(this.tableData.length==0){
				        this.$alert('请先上传文件', '提示', {
          					confirmButtonText: '确定',
        				})
					}
					else{
						for (var row in this.tableData) {
							//WGS84转国测局坐标
							var wgs84togcj02 = coordtransform.wgs84togcj02(this.tableData[row].wgs84lng,this.tableData[row].wgs84lat);	
							this.tableData[row].gclng=wgs84togcj02[0]
							this.tableData[row].gclat=wgs84togcj02[1]
						}
					}
				},
				//********************************************
				btn_bdtowgs84(){
					console.log('btn_bdtowgs84()')
					if(this.tableData.length==0){
				        this.$alert('请先上传文件', '提示', {
          					confirmButtonText: '确定',
        				})
					}
					else{
						for (var row in this.tableData) {
							//百度坐标转WGS84
							//百度经纬度坐标转国测局坐标
							var bd09togcj02 = coordtransform.bd09togcj02(this.tableData[row].lng,this.tableData[row].lat);			
							//国测局坐标转WGS84
							var gcj02towgs84 = coordtransform.gcj02towgs84(bd09togcj02[0],bd09togcj02[1]);
							this.tableData[row].wgs84lng=gcj02towgs84[0]
							this.tableData[row].wgs84lat=gcj02towgs84[1]
						}
					}
				},
				//********************************************
				btn_gctobd(){
					console.log('btn_gctobd()')
					if(this.tableData.length==0){
				        this.$alert('请先上传文件', '提示', {
          					confirmButtonText: '确定',
        				})
					}
					else{
						for (var row in this.tableData) {
							//国测局坐标转WGS84
							var gcj02tobd09 = coordtransform.gcj02tobd09(this.tableData[row].gclng,this.tableData[row].gclat);
							this.tableData[row].lng=gcj02tobd09[0]
							this.tableData[row].lat=gcj02tobd09[1]
						}
					}
				},
				//********************************************
				btn_gctowgs84(){
					console.log('btn_gctowgs84()')
					if(this.tableData.length==0){
				        this.$alert('请先上传文件', '提示', {
          					confirmButtonText: '确定',
        				})
					}
					else{
						for (var row in this.tableData) {
							//国测局坐标转WGS84
							var gcj02towgs84 = coordtransform.gcj02towgs84(this.tableData[row].gclng,this.tableData[row].gclat);
							this.tableData[row].wgs84lng=gcj02towgs84[0]
							this.tableData[row].wgs84lat=gcj02towgs84[1]
						}
					}
				},
				btn_exportexcle() {
					var table = document.querySelector("#table");
					console.log(table)
					var sheet = XLSX.utils.table_to_sheet(table);//将一个table对象转换成一个sheet对象
					console.log(sheet);
					openDownloadDialog(sheet2blob(sheet),"坐标.xlsx");
				},
				btn_exportcsv() {
					var table = document.querySelector("#table");
					console.log(table)
					var sheet = XLSX.utils.table_to_sheet(table);//将一个table对象转换成一个sheet对象
					console.log(sheet);
					var csv=XLSX.utils.sheet_to_csv(sheet)
					var blob = new Blob([csv], {type: '.csv, application/vnd.ms-excel;charset=GBK'});				
					const url3 = window.URL.createObjectURL(blob);
					console.log(blob); 	
					console.log(url3);
					openDownloadDialog(url3, "坐标.csv");
				},
				btn_exportjson() {
					var table = document.querySelector("#table");
					// console.log(table)
					var sheet = XLSX.utils.table_to_sheet(table);//将一个table对象转换成一个sheet对象
					console.log(sheet);
					var jsondata=XLSX.utils.sheet_to_json(sheet)
					// var jsondata={name:'json',age:'18'}
					var json=JSON.stringify(jsondata)
					console.log(json)			
					var blob = new Blob([json], {type: '.json, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel,charset=utf-8'}); // 'application/json'
					var blobUrl = URL.createObjectURL(blob);
					console.log(blob);
					console.log(blobUrl);
					openDownloadDialog(blobUrl,"坐标.json");
				},				
			}
		})
	</script>
	<script>
	    //国测局坐标(火星坐标,比如高德地图在用),百度坐标,wgs84坐标(谷歌国外以及绝大部分国外在线地图使用的坐标)
	    //百度经纬度坐标转国测局坐标
	    // var bd09togcj02 = coordtransform.bd09togcj02(116.404, 39.915);
	    // //国测局坐标转百度经纬度坐标
	    // var gcj02tobd09 = coordtransform.gcj02tobd09(116.404, 39.915);
	    // //wgs84转国测局坐标
	    // var wgs84togcj02 = coordtransform.wgs84togcj02(116.404, 39.915);
	    // //国测局坐标转wgs84坐标
	    // var gcj02towgs84 = coordtransform.gcj02towgs84(116.404, 39.915);
	    // console.log(bd09togcj02);
	    // console.log(gcj02tobd09);
	    // console.log(wgs84togcj02);
	    // console.log(gcj02towgs84);
	    //result
	    //bd09togcj02:   [ 116.39762729119315, 39.90865673957631 ]
	    //gcj02tobd09:   [ 116.41036949371029, 39.92133699351021 ]
	    //wgs84togcj02:  [ 116.41024449916938, 39.91640428150164 ]
	    //gcj02towgs84:  [ 116.39775550083061, 39.91359571849836 ]

	</script>
</html>
